<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>04-categoryList</title>
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/bootstrap-4.2.1/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/admin/easyui/themes/material-teal/easyui.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/admin/easyui/themes/icon.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/admin/easyui/themes/color.css">
</head>
<body>
  <div class="container-fluid">
    <br>
    <h3>物品分类</h3>
    <hr>
    <div class="">
      <table id="dg" class="easyui-datagrid" style="width:100%;height:480px;" 
        data-options="rownumbers:true,pagination:true,singleSelect:true,
        url:'${pageContext.request.contextPath }/category?method=getCategoryListForEasyUI',
        method:'post',fitColumns:true,striped:true,toolbar:'#toolbar'">
        <thead>
          <tr>
            <th scope="col" data-options="field:'cname',width:100,align:'center'">类名</th>
          </tr>
        </thead>
      </table>
    </div>
    <!-- 添加,编辑,移除按钮 -->
    <div id="toolbar">
        <a href="javascript:void(0)" class="easyui-linkbutton addCategoryCls" data-options="iconCls:'icon-add',plain:true" onclick="addCategory()">添加分类</a>
        <a href="javascript:void(0)" class="easyui-linkbutton editCategoryCls" data-options="iconCls:'icon-edit',plain:true" onclick="editCategory()">编辑分类</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="destroyCategory()">移除分类</a>
    </div>
  </div>
	
	<!-- Modal : addCategoryModal -->
	<div class="modal fade" id="addCategoryModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <h5 class="modal-title" id="exampleModalLabel">添加分类</h5>
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
	          <span aria-hidden="true">&times;</span>
	        </button>
	      </div>
	      <div class="modal-body">
	        <form action="" method="post" id="addCategoryForm">
	          <div class="form-group row">
	            <label for="forAddCname" class="col-sm-2 col-form-label text-center">类名</label>
	            <div class="col-sm-9">
	              <input type="text" class="form-control" id="forAddCname">
	            </div>
	          </div>
	        </form>
	      </div><!-- modal-body -->
	      <div class="modal-footer">
	        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
	        <button type="button" class="btn btn-primary submitAddCategoryBtn">添加</button>
	      </div><!-- modal-footer -->
	    </div><!-- modal-content -->
	  </div><!-- modal-dialog -->
	</div><!-- modal fade -->
	
	<!-- Modal : editCategoryModal -->
	<div class="modal fade" id="editCategoryModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <h5 class="modal-title" id="exampleModalLabel">编辑分类</h5>
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
	          <span aria-hidden="true">&times;</span>
	        </button>
	      </div>
	      <div class="modal-body">
	        <form action="#" method="post">
	          <input type="text" class="form-control" id="forEditCid" style="display:none;">
	          <div class="form-group row">
	            <label for="forEditCname" class="col-sm-2 col-form-label text-center">类名</label>
	            <div class="col-sm-9">
	              <input type="text" class="form-control" id="forEditCname">
	            </div>
	          </div>
	        </form>
	      </div><!-- modal-body -->
	      <div class="modal-footer">
	        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
	        <button type="button" class="btn btn-primary submitEditCategoryBtn">确定</button>
	      </div><!-- modal-footer -->
	    </div><!-- modal-content -->
	  </div><!-- modal-dialog -->
	</div><!-- modal fade -->

  <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/bootstrap-4.2.1/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/admin/easyui/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/admin/easyui/locale/easyui-lang-zh_CN.js"></script>
  <script type="text/javascript">
    // 添加分类
    function addCategory(){
        $(".addCategoryCls").attr( 'data-toggle','modal');
        $(".addCategoryCls").attr('data-target','#addCategoryModal');
        $(".submitAddCategoryBtn").removeAttr('data-dismiss','modal');
        $("#addCategoryForm").form('clear');
    }
    // 编辑分类，把弹出层弹出，并把数据显示处理
    function editCategory(){
    	var row = $("#dg").datagrid("getSelected");
        if(row){
          $(".editCategoryCls").attr('data-toggle','modal');
          $(".editCategoryCls").attr('data-target','#editCategoryModal');
          $(".submitEditCategoryBtn").removeAttr('data-dismiss','modal');
          $("#forEditCname").val(row.cname);
        }
    }
    // 移除分类
    function destroyCategory(){
    	var row = $('#dg').datagrid('getSelected');
    	if(row){
    		  $.messager.confirm('Confirm','确定删除此分类？',function(r){
    			  if(r){
    				  $.post(
    						  "/LostAndFound/category?method=handleDeleteCategoryForEasyUI",
                  {"cid":row.cid},
                  function(data){
                	  if(data.success){
                		  $("#dg").datagrid('reload');
                		}else{
                			$.messager.show({
                        title: 'Error',
                        msg:'删除错误！'
                      });
                    }
                  },
                  "json"
              );
           }
           })    		
    	}
    }
    $(function(){
    	// 确定修改
    	$(".submitEditCategoryBtn").on("click",function(){
    		var row = $('#dg').datagrid('getSelected');
    		var editCname = $("#forEditCname").val();
    		if(editCname==null||editCname==""){
    			$("#forEditCname").focus();
    		}else{
    			$(".submitEditCategoryBtn").attr('data-dismiss','modal');
    			$.post(
    				  "/LostAndFound/category?method=handleEditCategoryEasyUI",
    				  {"cid":row.cid,"cname":editCname},
    				  function(result){
    					  if (!result.success) {
    			         $.messager.show({
    			            title : 'Error',
    			            msg : "添加错误"
    			         });
    			      } else {
    			         $('#dg').datagrid('reload'); // reload the info data
    			      }
    				  },
    				  "json"
    			);
    		}
    	});
    	// 确定添加
    	$(".submitAddCategoryBtn").on("click",function(){
    		var addCname = $("#forAddCname").val();
    		if(addCname==null||addCname==""){
    	    $("#forAddCname").focus();
    	  }else{
    		  $(".submitAddCategoryBtn").attr('data-dismiss','modal');
    		  $.post(
    				  "/LostAndFound/category?method=handleAddCategoryEasyUI",
    				  {"cname":addCname},
    				  function(result){
    		        if (!result.success) {
    		          $.messager.show({
    		            title : 'Error',
    		            msg : "添加错误！"
    		          });
    		        } else {
    		           $('#dg').datagrid('reload'); // reload the info data
    		        }
    				  },
    				  "json"
    		  );
    	  }
    	});
    });
  </script>  
</body>
</html>